<!--
 * @Description: 添加
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-04-27 21:03:01
 * @FilePath: /yuxiuproweb/src/views/material/other/mods/add.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="1100px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-card class="box-card grid-box-card" shadow="hover">
        <div slot="header">
          <span class="title">商品原料</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="品名" prop="name">
              <el-input v-model="form.name" placeholder="请输入品名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售型号" prop="salesModel">
              <el-input
                v-model="form.salesModel"
                placeholder="请输入销售型号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售别名" prop="salesAlias">
              <el-input
                v-model="form.salesAlias"
                placeholder="请输入销售别名"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="标签" prop="label">
              <el-select
                v-model="form.label"
                placeholder="请选择标签"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.md_other_material_label"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位名称" prop="unitName">
              <el-select
                v-model="form.unitName"
                placeholder="请选择单位名称"
                style="width: 100%"
              >
                <el-option
                  v-for="item in dict.type.md_other_material_unit_name"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单重(千克)" prop="pieceWeight">
              <el-input-number
                style="width: 100%"
                v-model="form.pieceWeight"
                placeholder="请输入单重"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否可用" prop="isEnable">
              <el-switch
                v-model="form.isEnable"
                active-value="Y"
                inactive-value="N"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实物高度" prop="height">
              <el-input-number
                style="width: 100%"
                v-model="form.height"
                placeholder="请输入实物高度"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="相关信息" prop="info">
              <el-input v-model="form.info" placeholder="请输入相关信息" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="sku 图" prop="skuPicture">
              <image-upload v-model="form.skuPicture" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="平铺图" prop="tilePicture">
              <image-upload v-model="form.tilePicture" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">库存相关信息</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="是否备货" prop="stock">
              <el-radio-group v-model="form.stock">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最小库存" prop="minimumBalance">
              <el-input-number
                style="width: 100%"
                v-model="form.minimumBalance"
                placeholder="请输入最小库存"
                clearable
                :min="0"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购方式 " prop="procurementMethod">
              <el-radio-group v-model="form.procurementMethod">
                <el-radio
                  v-for="item in ProcurementMethods"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="库存类型" prop="stockType">
              <el-radio-group v-model="form.stockType">
                <el-radio
                  v-for="item in StockTypes"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="出库方式 " prop="deliveryMode">
              <el-radio-group v-model="form.deliveryMode">
                <el-radio
                  v-for="item in DeliveryModes"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="默认仓库" prop="defaultWarehouse">
              <el-select
                v-model="form.defaultWarehouse"
                placeholder="请选择默认仓库"
                style="width: 100%"
              >
                <el-option
                  v-for="item in DefaultWarehouses"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card grid-box-card mt20" shadow="hover">
        <div slot="header">
          <span class="title">价格相关数据</span>
        </div>
        <el-row>
          <el-col :span="8">
            <el-descriptions
              class="open-right"
              direction="vertical"
              :column="2"
              border
            >
              <el-descriptions-item label="价格">单价</el-descriptions-item>
              <el-descriptions-item label="出厂价">
                <el-form-item label-width="0" prop="factoryPrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.factoryPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="16">
            <el-descriptions
              class="ml20 open-right"
              direction="vertical"
              :column="3"
              border
            >
              <el-descriptions-item label="价格"
                >单价<span style="color: red"
                  >(默认价格)</span
                ></el-descriptions-item
              >
              <el-descriptions-item label="经销价">
                <el-form-item label-width="0" prop="wholesalePrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.wholesalePrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="零售价">
                <el-form-item label-width="0" prop="retailPrice">
                  <el-input-number
                    style="width: 100%"
                    v-model="form.retailPrice"
                    placeholder="请输入"
                    clearable
                    :min="0"
                    :controls="false"
                    :precision="2"
                  ></el-input-number>
                </el-form-item>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMaterial, addMaterial, updateMaterial } from "@/api/material/other";
import {
  ProcurementMethods,
  StockTypes,
  DeliveryModes,
  DefaultWarehouses,
} from "../configure";
export default {
  dicts: ["md_other_material_label", "md_other_material_unit_name"],
  props: {
    show: Boolean,
    type: {
      type: String,
      default: "add",
    },
    data: {
      type: Object,
    },
  },
  data() {
    return {
      ProcurementMethods,
      StockTypes,
      DeliveryModes,
      DefaultWarehouses,
      // 表单参数
      form: {
        otherMaterialId: null,
        name: null,
        salesModel: null,
        salesAlias: null,
        label: null,
        unitName: null,
        pieceWeight: null,
        isEnable: "N",
        height: null,
        skuPicture: null,
        tilePicture: null,
        info: null,
        stock: "N",
        minimumBalance: null,
        procurementMethod: null,
        stockType: null,
        deliveryMode: null,
        defaultWarehouse: null,
        factoryPrice: null,
        wholesalePrice: null,
        retailPrice: null,
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "品名不能为空", trigger: "change" }],
        label: [{ required: true, message: "请选择标签", trigger: "change" }],
        unitName: [
          { required: true, message: "请选择单位", trigger: "change" },
        ],
        pieceWeight: [
          { required: true, message: "请输入单重", trigger: "change" },
        ],
        height: [{ required: true, message: "请输入高度", trigger: "change" }],
      },
    };
  },
  computed: {
    title() {
      return {
        add: "添加其他物料",
        edit: "修改其他物料",
      }[this.type];
    },
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    if (this.type === "edit") {
      this.handleUpdate();
    }
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      const otherMaterialId = this.data.otherMaterialId;
      getMaterial(otherMaterialId).then((response) => {
        this.form = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.otherMaterialId != null) {
            updateMaterial(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.shows = false;
              this.$emit("update");
            });
          } else {
            addMaterial(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.shows = false;
              this.$emit("update");
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
